<template>
	<view class="uni-column bg-white">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">下单预留</block>
		</cu-custom>
		<view v-if="martinResp!=null">
			<contract-floor class="uni-column" style="display: flex;" :floor="martinResp"></contract-floor>
		</view>
		<view class="uni-column" style="min-height: 40vh;" v-if="martinResp!=null&&martinResp.statusFloors!=null">
			<view class="uni-column" v-for="(item,index) in martinResp.statusFloors" :key="index" style="margin-top: 10upx;">
				<contract-floor class="uni-column" style="display: flex;" :floor="item"></contract-floor>
			</view>
		</view>
		<view v-if="martinPara.direction=='BUY_LONG'||martinPara.direction=='BUY_SHORT'">
			<view class="uni-column" style="flex: 1;">
				<view>
					<checkbox-group style="padding-left: 10rpx;" @change="checkboxChange">
						<label style="font-weight: bolder;color:#DD0606 ;">
							<checkbox value="1"  :class="useStopLoss?'checked':''" :checked="useStopLoss" color="#DD0606" style="transform:scale(0.7);" />止损建议
						</label>
						<label style="font-weight: bolder;color:#DD0606 ; margin-left: 40rpx;">
							<checkbox value="2"  :class="useStopProfit?'checked':''" :checked="useStopProfit" color="#DD0606" style="transform:scale(0.7);" />止盈建议
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>
		<view>
			<button :class="martinPara.direction=='BUY_LONG'||martinPara.direction=='SELL_SHORT'?'btn uni-bg-up':'btn uni-bg-down'" style="margin-top: 15rpx;"
			 @click="createMartinOrder">一键下单</button>
		</view>
	</view>
</template>

<script>
	import contractFloor from "@/components/contractFloor.vue"
	var _self;
	export default {
		components: {
			contractFloor
		},
		data() {
			return {
				martinPara: null,
				martinResp: null,
				useStopLoss: false,
				useStopProfit: false,
				previewType: ''
			}
		},
		onLoad(e) {
			_self = this
			_self.previewType = e.previewType
			_self.martinPara = JSON.parse(e.martinPara)
			console.log("onload martin " + JSON.stringify(e))

		},
		onReady() {
			_self.createTempMartinOrder()
		},
		methods: {
			//===============api action start========================//
			createTempMartinOrder() {
				uni.showLoading({
					title: '加载中'
				})
				console.log("createTempMartinOrder")
				console.log(_self.martinPara)
				uni.request({
					url: _self.api + '/futures/' + this.previewType,
					method: 'POST',
					header: {
						"Authorization": "Bearer " + _self.getToken()
					},
					data: _self.martinPara,
					success: res => {
						console.log("createTempMartinOrder result")
						if (res.data.code > 200000) {
							console.log(res.data.code)
							uni.showModal({
								showCancel: false,
								content: res.data.msg
							})
						} else {
							_self.martinResp = res.data.data
						}
					},
					complete() {
						if ((_self.martinPara.direction == 'BUY_LONG' && _self.martinResp.lastPrice < _self.martinResp.liquiPrice) ||
							(_self.martinPara.direction == 'BUY_SHORT' && _self.martinResp.lastPrice > _self.martinResp.liquiPrice))
							uni.showModal({
								showCancel: false,
								content: "高低价之间爆仓!!,请知悉"
							})
						uni.hideLoading()
					}
				});
			},

			createMartinOrder() {
				console.log("createMartinOrder")
				console.log(_self.martinResp.floorTempId)
				console.log(_self.useStopLoss)
				console.log(_self.useStopProfit)
				uni.showLoading({
					mask: true,
					title: "加载中..."
				})
				uni.request({
					url: _self.api + '/futures/orders/floor?floorTempId=' + _self.martinResp.floorTempId + '&useStopLoss=' + this.useStopLoss+'&useStopProfit='+this.useStopProfit,
					method: 'POST',
					header: {
						"Authorization": "Bearer " + _self.getToken()
					},
					success: res => {
						console.log("createMartinOrder result")
						console.log(res.data.data)
						_self.martinResp = res.data.data
					},
					complete() {
						uni.hideLoading()
						uni.$emit('positionFresh')
						uni.navigateBack({
							delta: 1
						})
					}
				});
			},
			checkboxChange(e) {
				console.log(e)
				this.useStopLoss = false
				this.useStopProfit = false
				for (let item of e.detail.value) {
					if (item == '1') {
						this.useStopLoss = true
					} else if (item == '2') {
						this.useStopProfit = true
					}
				}
			}
			//===============api action end========================//
		}
	}
</script>

<style>
	/* view {
		border: #000000 1px solid;
	} */

	.header {
		/* height: 150upx; */
		background-color: #FEF0B7;
		width: 100%;
	}

	.result {
		/* height: 125upx; */
		background-color: #EEFFC5;
		width: 100%;
		border-top: #D76A00 1px solid;
		border-bottom: #D76A00 1px solid;
	}

	.pagoda-name {
		font-size: 30upx;
		padding-left: 20upx;
		font-weight: bold;
	}

	.resave-box {
		border: #AFAFAF 1px solid;
		height: 100upx;
		padding-left: 10upx;
		background-color: #FAFAFA;
	}

	.igroup span {
		display: inline-flex;
		align-items: center;
		font-size: 0.8em;
	}

	.iinput {
		text-align: right;
		padding-right: 20upx;
	}

	.iholder {
		color: #898989;
		padding-left: 10upx;
	}

	.iunit {
		color: #898989;
		padding-right: 10upx;
	}

	.igroup {
		border: 1px solid #B4B4B4;
		height: 58upx;
		align-items: center;
		margin-top: 5upx;
	}

	.line {
		height: 30upx;
		justify-content: flex-start;
		width: 100%;
		display: flex;
		padding-left: 20upx;
		display: flex;
		flex-direction: row;
	}

	.martinKey {
		font-size: 20upx;
		color: #918F8F;
		line-height: 30upx;
	}

	.btn {
		height: 74upx;
		line-height: 74upx;
		color: #fff;
		font-size: 28upx;
		font-weight: bold;
		margin-top: 30upx;
	}

	.martinValUp {
		font-size: 20upx;
		margin-left: 20upx;
		color: #00B48E;
		line-height: 30upx;
		font-weight: bold;
	}

	.martinValDown {
		font-size: 20upx;
		margin-left: 20upx;
		color: #D14B64;
		line-height: 30upx;
		font-weight: bold;
	}

	.martin-order {
		display: flex;
		width: 100%;
		flex-direction: column;
		background-color: #DADADA;
	}

	.pmain .item {
		position: relative;
		width: 100%;
		display: flex;
		font-size: 24upx;
		padding-left: 20upx;
	}

	.pmain .item .bg {
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		z-index: -9999;
	}

	.pmain .item .buybg {
		background: #fdf4f7;
	}

	.pmain .item .sellbg {
		background: #f0faf9;
	}

	.pmain .item .price {
		display: block;
		width: 50%;
		text-align: left;
	}

	.position .item .num {
		display: block;
		width: 50%;
		text-align: right;
		padding-right: 10upx;
	}

	.pmain .current-price {
		margin: 10upx 0;
	}

	.pmain .current-price .usdt {}

	.popover-wrap .uni-thinner-border:before {
		border-radius: 15px !important;
	}
</style>
